<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="前端,http," />










<meta name="description" content="互联网设计初，自带一个问题：浏览器和服务器的识别问题。http 是无连接的，请求完毕之后，链接就会断掉。没有长久的数据通路。  1. Cookie Cookie 就是在下行 HTTP 响应的报文中，添加 set-cookie 属性，要求浏览器设置 cookie。    浏览器在每一次请求中都需要在上行的请求报文头中，携带 cookie 上去，告诉服务器：“我是谁”！ 方便服务器对自己的识别。">
<meta name="keywords" content="前端,http">
<meta property="og:type" content="article">
<meta property="og:title" content="网络知识（1）">
<meta property="og:url" content="http://yoursite.com/2019/07/28/网络知识（1）/index.html">
<meta property="og:site_name" content="kaiwen&#39;s blog">
<meta property="og:description" content="互联网设计初，自带一个问题：浏览器和服务器的识别问题。http 是无连接的，请求完毕之后，链接就会断掉。没有长久的数据通路。  1. Cookie Cookie 就是在下行 HTTP 响应的报文中，添加 set-cookie 属性，要求浏览器设置 cookie。    浏览器在每一次请求中都需要在上行的请求报文头中，携带 cookie 上去，告诉服务器：“我是谁”！ 方便服务器对自己的识别。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://s2.ax1x.com/2019/07/28/elJjhQ.png">
<meta property="og:image" content="https://s2.ax1x.com/2019/07/28/elJz1s.png">
<meta property="og:image" content="https://s2.ax1x.com/2019/07/28/elJxpj.png">
<meta property="og:updated_time" content="2019-07-28T07:38:04.590Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="网络知识（1）">
<meta name="twitter:description" content="互联网设计初，自带一个问题：浏览器和服务器的识别问题。http 是无连接的，请求完毕之后，链接就会断掉。没有长久的数据通路。  1. Cookie Cookie 就是在下行 HTTP 响应的报文中，添加 set-cookie 属性，要求浏览器设置 cookie。    浏览器在每一次请求中都需要在上行的请求报文头中，携带 cookie 上去，告诉服务器：“我是谁”！ 方便服务器对自己的识别。">
<meta name="twitter:image" content="https://s2.ax1x.com/2019/07/28/elJjhQ.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'kaiwen0425'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2019/07/28/网络知识（1）/"/>





  <title>网络知识（1） | kaiwen's blog</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?5fa9fbd44c4b59554f025c182fcb517e";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">kaiwen's blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            Tags
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            About
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/07/28/网络知识（1）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Kaiwen0627">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="https://s1.ax1x.com/2018/08/05/PDbmd0.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="kaiwen's blog">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">网络知识（1）</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2019-07-28T13:57:38+08:00">
                2019-07-28
              </time>
            

            
              <span class="post-meta-divider">|</span>
            

            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-check-o"></i>
              </span>
              
                <span class="post-meta-item-text">Post modified&#58;</span>
              
              <time title="Post modified" itemprop="dateModified" datetime="2019-07-28T15:38:04+08:00">
                2019-07-28
              </time>
            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/http/" itemprop="url" rel="index">
                    <span itemprop="name">http</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <blockquote>
<p>互联网设计初，自带一个问题：浏览器和服务器的<code>识别问题</code>。<br>http 是无连接的，请求完毕之后，链接就会断掉。没有长久的数据通路。</p>
</blockquote>
<h4 id="1-Cookie"><a href="#1-Cookie" class="headerlink" title="1. Cookie"></a>1. Cookie</h4><ul>
<li>Cookie 就是在下行 HTTP 响应的报文中，添加 set-cookie 属性，要求浏览器设置 cookie。</li>
</ul>
<p><img src="https://s2.ax1x.com/2019/07/28/elJjhQ.png" alt="set cookie"></p>
<ul>
<li>浏览器在每一次请求中都需要在上行的请求报文头中，携带 cookie 上去，告诉服务器：“我是谁”！ 方便服务器对自己的识别。</li>
</ul>
<p><img src="https://s2.ax1x.com/2019/07/28/elJz1s.png" alt="post cookie"></p>
<blockquote>
<p>优点：简单，明文存储</p>
</blockquote>
<blockquote>
<p>缺点：太过简单，容易被修改；明文存储，不安全；修改简单。需要每次请求时带上 cookie 发送给服务器。效率低。服务器端需要不断的 set_cookie.</p>
</blockquote>
<ul>
<li><p>cookie 的用途：</p>
<p>1） 存储数据（有 H5 本地存储之前）</p>
</li>
</ul>
<h4 id="2-Session"><a href="#2-Session" class="headerlink" title="2. Session"></a>2. Session</h4><p>Session 就是密文的 cookie。Session 不是新技术，只是设置 cookie 为一个乱码的字符串。</p>
<p><img src="https://s2.ax1x.com/2019/07/28/elJxpj.png" alt="post cookie"></p>
<ul>
<li>服务器和浏览器识别的唯一信息就是这个乱码字符串。</li>
</ul>
<h4 id="3-Token"><a href="#3-Token" class="headerlink" title="3. Token"></a>3. Token</h4><p>两个解密算法：<br>SHA256 、MD5</p>
<blockquote>
<p>MD5: MD5 消息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个 128 位（16 字节）的散列值（hash value），用于确保信息传输完整一致。加密算法包含信息：（ip、手机号、浏览器版本、系统版本等）</p>
</blockquote>
<ul>
<li>这两个加密算法都不可逆 ==[可以加密，但不可以反向解密]==</li>
</ul>
<blockquote>
<p>关键点：服务器掌握信息的算法，而浏览器只是掌握信息本身！</p>
</blockquote>
<blockquote>
<p>token 是一个加密的字符串。里面包含有个人身份信息。token 不能判断用户是谁，只能校验数据合法性。</p>
</blockquote>
<h4 id="4-跨域"><a href="#4-跨域" class="headerlink" title="4. 跨域"></a>4. 跨域</h4><h5 id="4-1-代理跨域"><a href="#4-1-代理跨域" class="headerlink" title="4.1 代理跨域"></a>4.1 代理跨域</h5><p>浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。服务器代理是万能的。</p>
<p>代理服务器就是浏览器端A与请求服务器端C之间存在一个和浏览器同源的代理服务器B。浏览器A发送的请求都会被代理服务器B处理，发送个服务器C，然后把C的响应给浏览器A。</p>
<h5 id="4-2-CORS"><a href="#4-2-CORS" class="headerlink" title="4.2 CORS"></a>4.2 CORS</h5><p>CORS ：Cross-origin resource sharing，跨域资源共享。 就是被访问请求的服务器“自己”设置为 允许某些或者所有非同源客户端请求。此设置需要服务端修改。实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。</p>

      
    </div>
    
    
    

    
      <div>
        <div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
    <img id="wechat_subscriber_qcode" src="/uploads/wx.jpg" alt="Kaiwen0627 wechat" style="width: 200px; max-width: 100%;"/>
    <div>欢迎您扫一扫上面的微信公众号关注我。</div>
</div>

      </div>
    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端/" rel="tag"># 前端</a>
          
            <a href="/tags/http/" rel="tag"># http</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/07/23/javascript算法（壹）/" rel="next" title="javascript算法（壹）">
                <i class="fa fa-chevron-left"></i> javascript算法（壹）
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/10/20/网络知识（2）--Nginx/" rel="prev" title="网络知识（2）--Nginx">
                网络知识（2）--Nginx <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
        
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="https://s1.ax1x.com/2018/08/05/PDbmd0.jpg"
                alt="Kaiwen0627" />
            
              <p class="site-author-name" itemprop="name">Kaiwen0627</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">categories</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">16</span>
                  <span class="site-state-item-name">tags</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/kaiwen0627" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:kaiwen0425@gmail.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.zhihu.com/people/kaiwen0425/activities" target="_blank" title="知乎">
                      
                        <i class="fa fa-fw fa-globe"></i>知乎</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/u/5075683550?refer_flag=1001030101_&is_hot=1" target="_blank" title="微博">
                      
                        <i class="fa fa-fw fa-globe"></i>微博</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-Cookie"><span class="nav-number">1.</span> <span class="nav-text">1. Cookie</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-Session"><span class="nav-number">2.</span> <span class="nav-text">2. Session</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-Token"><span class="nav-number">3.</span> <span class="nav-text">3. Token</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-跨域"><span class="nav-number">4.</span> <span class="nav-text">4. 跨域</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#4-1-代理跨域"><span class="nav-number">4.1.</span> <span class="nav-text">4.1 代理跨域</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#4-2-CORS"><span class="nav-number">4.2.</span> <span class="nav-text">4.2 CORS</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 &mdash; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">kaiwen0627</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  




  
  







  



  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/three/three.min.js"></script>
  

  
  
    <script type="text/javascript" src="/lib/three/three-waves.min.js"></script>
  

  
  
    <script id="ribbon" type="text/javascript" size="10" alpha="0.4"  zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  
  <script type="text/javascript" src="/js/src/js.cookie.js?v=5.1.4"></script>
  <script type="text/javascript" src="/js/src/scroll-cookie.js?v=5.1.4"></script>


  

</body>
</html>
